<template>
  <div :style="baseStyle" class="tree-collaps-ablenode">
    <div :style="pngContent">
      <img @click="toggleExpand" :style="rotateStyle" src="@/assets/icons/open.png" alt="" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { inject, ref, onMounted, computed } from "vue";

// 定义 getNode 和 getGraph 的类型
interface Node {
  data: {
    expand: boolean;
    children?: string[];
  };
  visible: boolean;
  on: (event: string, callback: (args) => void) => void;
  setData: (data: Partial<Node["data"]>) => void;
}

interface Graph {
  getCellById: (id: string) => { show: () => void; hide: () => void } | undefined;
}

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  fullscreenLoading: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(["handleExpandCollapse"]);

// 使用 inject 并提供类型
const getGraph = inject<() => Graph>("getGraph");
const getNode = inject<() => Node>("getNode");

const expand = ref(true);

const baseStyle = {
  width: "100%",
  height: "100%",
  borderRadius: "50%",
  zIndex: 10,
  cursor: "pointer",
  backgroundColor: "rgb(33, 60, 141)",
  color: "white",
  fontSize: "19px",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  border: "3px solid white"
};

const pngContent = {
  width: "100%",
  height: "100%",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  borderRadius: "50%"
};

// 使用计算属性来动态生成旋转样式
const rotateStyle = computed(() => ({
  transform: expand.value ? "rotate(180deg)" : "rotate(0deg)",
  transition: "transform 0.3s ease"
}));

onMounted(() => {
  // const node = getNode?.()

  init();
  // if (node?.data.layer === 1) {
  //   toggleExpand()
  // }
});

const init = () => {
  const node = getNode?.();
  const graph = getGraph?.();
  if (node && graph) {
    expand.value = node.data.expand;
    node.on("change:data", ({ current }) => {
      expand.value = current.expand;
    });

    node.on("change:visible", () => {
      if (node.data.children) {
        node.data.children.forEach(key => {
          const child = graph.getCellById(key);
          const expandChild = graph.getCellById(`expand-${key}`);
          if (node.visible && node.data.expand) {
            child?.show();
            expandChild?.show();
          } else {
            child?.hide();
            expandChild?.hide();
          }
        });
      }
    });
  }
};

const toggleExpand = () => {
  const node = getNode?.();
  const graph = getGraph?.();

  if (node && graph) {
    if (node.data.children) {
      node.data.children.forEach(key => {
        const child = graph.getCellById(key);
        const expandChild = graph.getCellById(`expand-${key}`);
        if (expand.value) {
          child?.hide();
          expandChild?.hide();
        } else {
          child?.show();
          expandChild?.show();
        }
      });
    }

    emits("handleExpandCollapse", node);
    node.setData({
      expand: !expand.value
    });
  }
};
</script>

<style></style>
